.wrap {
  perspective: 1000px;
  perspective-origin: 50% 50%;
  margin: 100px 0 125px;
}

.cube {
  margin: auto;
  position: relative;
  height: 300px;
  width: 300px;
  transform-style: preserve-3d;
}

.cube > div {
  position: absolute;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  opacity: 0.8;
  background-color: #222;
  color: #fff;
}

.front {
  transform: translateZ(200px);
}

.back {
  transform: translateZ(-100px) rotateY(180deg);
}

.right {
  transform: rotateY(-270deg) translateX(100px);
  transform-origin: top right;
}

.left {
  transform: rotateY(270deg) translateX(-100px);
  transform-origin: center left;
}

.top {
  transform: rotateX(-270deg) translateY(-100px);
  transform-origin: top center;
}

.bottom {
  transform: rotateX(270deg) translateY(100px);
  transform-origin: bottom center;
}

@keyframes rotate {
  from {
  transform: rotateX(0deg) rotateY(0deg);
  }

  to {
  transform: rotateX(360deg) rotateY(360deg);
  }
}

.cube {
  animation: rotate 15s infinite linear;
}

.no-touch .cube:hover .front {
  transform: translateZ(300px) !important;
}

.no-touch .cube:hover .back {
  transform: translateZ(-200px) rotateY(180deg);
}

.no-touch .cube:hover .right {
  transform: rotateY(-270deg) translateZ(100px) translateX(100px);
}

.no-touch .cube:hover .left {
  transform: rotateY(270deg) translateZ(100px) translateX(-100px);
}

.no-touch .cube:hover .top {
  transform: rotateX(-270deg) translateZ(100px) translateY(-100px);
}

.no-touch .cube:hover .bottom {
  transform: rotateX(270deg) translateZ(100px) translateY(100px);
}

.cube > div {
  transition: transform 0.5s ease;
}
